<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=c077eeff9145304f17def10702bd3365"></script>


<script>
    //初始化地图插件
    window.onload = function () {
        var map = new AMap.Map("container", {
            zoom: 15, //设置地图显示的缩放级别
            // center: [117.44927, 32.9584] //设置地图中心点坐标
        });
        
        AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.OverView',
            'AMap.MapType',
            'AMap.Geolocation',
        ], function () {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar());

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            map.addControl(new AMap.OverView({ isOpen: true }));

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            map.addControl(new AMap.MapType());

            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
        });
        // 创建一个 Marker 实例：（标记点）
        var marker = new AMap.Marker({
            position: new AMap.LngLat(117.44927, 30.9584), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "位置标题"
        });

        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
    }
</script>

</html>